<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <form>
      <div class="form-group">
        <label for="username">Email address</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <div id="showTips"></div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('button').click(function(event) {
                event.preventDefault();
                $(function(){
                    $.ajax(
                        {
                            type:'get',//jsonp一定要用GET类型！！！！
                            url : 'http://test2.com/jsonp.php',
                            dataType : 'jsonp',
                            jsonp:"jsoncallback",
                            data:{
                                'username':$('#username').val(),
                                'password':$('#password').val()
                            },
                            success  : function(data) {
                                var html = "<div>用户名："+ data.user+"</div>";
                                html +=  "<div>密码："+ data.pass+"</div>";
                                $("#showTips").html(html);
                            },
                            error : function() {
                                $("#showTips").html('error connect!');
                            }
                        }
                    );
                });

            });
        });
    </script>
</body>
</html>
